<template>
    <el-dialog v-model="state.dialogFormVisible" :title="title" width="600px" destroy-on-close center>
        <el-container>
            <el-main>
                <div class="content" v-html="valueHtml"></div>
            </el-main>
        </el-container>
    </el-dialog>
</template>

<script lang="ts" setup>
    import {
        ref, onBeforeUnmount, reactive
    } from 'vue'
    import { bus } from "@/utils/mitt"
    import { getCompanyIntroduce } from '@/api/setting.js'

    
    const valueHtml = ref()

    const title = ref()
    bus.on("introduce", async (id: number) => {
        if (id == 1) {
            title.value = '公司介绍'
            const res: any = await getCompanyIntroduce('公司介绍')
            console.log(res)
            valueHtml.value = res.result.set_text

        }
        if (id == 2) {
            title.value = '公司架构'
            const res: any = await getCompanyIntroduce('公司架构')
            console.log(res)
            valueHtml.value = res.result.set_text
        }
        if (id == 3) {
            title.value = '公司战略'
            const res: any = await getCompanyIntroduce('公司战略')
            console.log(res)
            valueHtml.value = res.result.set_text
        }
        if (id == 4) {
            title.value = '公司高层'
            const res: any = await getCompanyIntroduce('公司高层')
            console.log(res)
            valueHtml.value = res.result.set_text
        }
    })
    const state = reactive({
        dialogFormVisible: false
    })
    // 暴露open方法
    const open = () => {
        state.dialogFormVisible = true;
    };
    defineExpose({
        open,
    });

    // 取消订阅/监听
    onBeforeUnmount(() => {
        bus.all.clear()
    })
</script>
<style scoped lang="scss">
    .content {
        text-align: center;
    }

    :deep(.el-main) {
        min-height: 500px;
    }
</style>